<template>
  <div class="products-import">
    <el-card>
      <template #header>
        <h3>商品批量导入</h3>
      </template>

      <el-steps :active="currentStep" finish-status="success" align-center class="import-steps">
        <el-step title="下载模板" />
        <el-step title="上传文件" />
        <el-step title="数据校验" />
        <el-step title="导入完成" />
      </el-steps>

      <!-- 步骤1: 下载模板 -->
      <div v-if="currentStep === 0" class="step-content">
        <el-alert
          title="温馨提示"
          type="info"
          description="请先下载商品导入模板，按照模板格式填写商品信息后再上传。"
          :closable="false"
          show-icon
        />
        <div class="template-download">
          <el-button type="primary" size="large" @click="handleDownloadTemplate">
            <el-icon><Download /></el-icon>
            下载导入模板
          </el-button>
        </div>
        <div class="step-actions">
          <el-button type="primary" @click="nextStep">下一步</el-button>
        </div>
      </div>

      <!-- 步骤2: 上传文件 -->
      <div v-if="currentStep === 1" class="step-content">
        <el-upload
          class="upload-demo"
          drag
          action="#"
          :auto-upload="false"
          :on-change="handleFileChange"
          :limit="1"
          accept=".xlsx,.xls"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            将Excel文件拖到此处，或<em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              只能上传 xlsx/xls 文件，且不超过 10MB
            </div>
          </template>
        </el-upload>
        <div class="step-actions">
          <el-button @click="prevStep">上一步</el-button>
          <el-button type="primary" @click="nextStep" :disabled="!uploadFile">下一步</el-button>
        </div>
      </div>

      <!-- 步骤3: 数据校验 -->
      <div v-if="currentStep === 2" class="step-content">
        <el-alert
          title="数据校验完成"
          type="success"
          :description="`共 ${validationResult.total} 条数据，有效 ${validationResult.valid} 条，无效 ${validationResult.invalid} 条`"
          show-icon
          :closable="false"
        />
        <el-table :data="sampleData" stripe border class="validation-table">
          <el-table-column prop="row" label="行号" width="80" />
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="category" label="分类" width="120" />
          <el-table-column prop="price" label="价格" width="100" />
          <el-table-column prop="status" label="校验状态" width="120">
            <template #default="{ row }">
              <el-tag :type="row.valid ? 'success' : 'danger'">
                {{ row.valid ? '有效' : '无效' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="message" label="错误信息" />
        </el-table>
        <div class="step-actions">
          <el-button @click="prevStep">上一步</el-button>
          <el-button type="primary" @click="handleImport" :loading="importing">
            开始导入
          </el-button>
        </div>
      </div>

      <!-- 步骤4: 导入完成 -->
      <div v-if="currentStep === 3" class="step-content">
        <el-result
          icon="success"
          title="导入完成"
          :sub-title="`成功导入 ${importResult.success} 条数据，失败 ${importResult.failed} 条`"
        >
          <template #extra>
            <el-button type="primary" @click="handleViewProducts">查看商品列表</el-button>
            <el-button @click="handleReset">继续导入</el-button>
          </template>
        </el-result>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Download, UploadFilled } from '@element-plus/icons-vue'

const router = useRouter()

const currentStep = ref(0)
const uploadFile = ref(null)
const importing = ref(false)

const validationResult = reactive({
  total: 0,
  valid: 0,
  invalid: 0
})

const importResult = reactive({
  success: 0,
  failed: 0
})

const sampleData = ref([
  { row: 1, productName: 'iPhone 15', category: '电子产品', price: 5999, valid: true, message: '' },
  { row: 2, productName: 'MacBook Pro', category: '电子产品', price: 12999, valid: true, message: '' },
  { row: 3, productName: '商品A', category: '', price: 0, valid: false, message: '分类不能为空，价格必须大于0' }
])

const handleDownloadTemplate = () => {
  ElMessage.success('模板下载成功')
}

const handleFileChange = (file) => {
  uploadFile.value = file
  ElMessage.success('文件选择成功')
}

const nextStep = () => {
  if (currentStep.value === 1) {
    // 模拟数据校验
    validationResult.total = 100
    validationResult.valid = 97
    validationResult.invalid = 3
  }
  currentStep.value++
}

const prevStep = () => {
  currentStep.value--
}

const handleImport = async () => {
  importing.value = true
  // 模拟导入
  await new Promise(resolve => setTimeout(resolve, 2000))
  importResult.success = validationResult.valid
  importResult.failed = validationResult.invalid
  importing.value = false
  nextStep()
}

const handleViewProducts = () => {
  router.push('/products/list')
}

const handleReset = () => {
  currentStep.value = 0
  uploadFile.value = null
}
</script>

<style scoped>
.products-import {
  padding: 20px;
}

.import-steps {
  margin: 40px 0;
}

.step-content {
  margin-top: 40px;
}

.template-download {
  text-align: center;
  margin: 40px 0;
}

.step-actions {
  text-align: center;
  margin-top: 40px;
}

.validation-table {
  margin-top: 20px;
}
</style>

